<!-- 医院报表 -->
<template>
  <div class="hospital-report">
    <div class="seach-box box">
      <el-form
        ref="searchFrom"
        size="mini"
        :inline="true"
        :model="searchFrom"
        class="demo-form-inline"
      >
        <el-form-item label="医院名称" class="minclass">
          <el-select v-model="searchFrom.hospitalName" filterable>
            <el-option label="全部" value="" />
            <el-option
              v-for="(item, index) in allHospitalList"
              :key="index"
              :label="item.hospitalName"
              :value="item.hospitalName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="医院地址" class="minclass">
          <el-cascader
            v-model="searchFrom.address"
            :options="options"
            placeholder="请选择医院地址"
            :props="{ expandTrigger: 'hover' }"
          />
        </el-form-item>
        <el-form-item class="btn-content">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('searchFrom')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="data-box">
      <div class="list-box">
        <div class="list">
          <div
            class="card-info"
            v-for="(item, index) in dataList"
            :key="index"
            @click="toDetail(item)"
          >
            <div class="card-txt">
              <div class="txt-li">
                <span class="li-title">医院名称：</span>
                <el-popover
                  class="li-info"
                  trigger="hover"
                  :content="item.hospitalName"
                >
                  <span class="li-info" slot="reference">{{
                    item.hospitalName
                  }}</span>
                </el-popover>
              </div>
              <div class="txt-li margin-12">
                <span class="li-title">医院地址：</span>
                <span class="li-info">{{
                  item.province + item.city + item.country
                }}</span>
              </div>
              <div class="txt-li margin-12">
                <span class="li-title">患者数：</span>
                <span class="li-info num">{{ item.patientNum }}</span>
              </div>
            </div>
            <div class="card-img">
              <img :src="item.logo" alt="" />
            </div>
          </div>
        </div>
      </div>

      <Pagination @getData="getData" :pageData="pageData" />
    </div>
  </div>
</template>

<script>
import debounce from '@/utils/js/debounce';
import areaData from '@/utils/js/country-level3-data';
import Pagination from '@/components/Pagination';
export default {
  components: {
    Pagination,
  },
  name: 'HospitalReport',
  data() {
    return {
      searchFrom: {
        hospitalName: '',
        address: [],
      },
      dataList: [],
      allHospitalList: [],
      options: areaData,
      // 传给分页的数据
      pageData: {
        total: 100,
        pageSize: 10,
        currentPage: 1,
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.pageData = {
      total: this.dataList.length,
      pageSize: 10,
      currentPage: 1,
    };
    this.getHospitalNum(
      this.pageData.currentPage,
      this.pageData.pageSize,
      this.searchFrom
    );
    this.getHospital();
  },
  methods: {
    getHospital() {
      this.$http
        .systemGetAllHospital()
        .then(res => {
          if (res.code == '0000000000') {
            this.allHospitalList = res.data;
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'error',
            });
          }
        })
        .catch(() => {});
    },
    //查询按钮
    onSubmit: debounce(function () {
      this.pageData.currentPage = 1;
      this.getHospitalNum(
        this.pageData.currentPage,
        this.pageData.pageSize,
        this.searchFrom
      );
    }, 1000),
    getHospitalNum(currentPage, pageSize, info) {
      let province = '';
      let city = '';
      let country = '';
      if (info.address && info.address.length > 0) {
        province = info.address[0];
        city = info.address[1];
        country = info.address[2];
      }
      let params = {
        currentPage,
        pageSize,
        hospitalName: info.hospitalName,
        province,
        city,
        country,
      };
      this.$http
        .getHospitalPatientNum(params)
        .then(res => {
          if (res.code == '0000000000') {
            this.dataList = res.data.records;
            this.pageData.currentPage = res.data.current;
            this.pageData.pageSize = res.data.size;
            this.pageData.total = res.data.total;
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'error',
            });
          }
        })
        .catch(() => {});
    },
    //重置
    resetForm: debounce(function () {
      this.searchFrom = {
        hospitalName: '',
        address: [],
      };
      this.pageData = {
        total: 10,
        pageSize: 10,
        currentPage: 1,
      };
      this.getHospitalNum(
        this.pageData.currentPage,
        this.pageData.pageSize,
        this.searchFrom
      );
    }, 1000),
    //  分页数据改变
    getData(val) {
      this.pageData = val;
      this.getHospitalNum(
        this.pageData.currentPage,
        this.pageData.pageSize,
        this.searchFrom
      );
    },
    //去质控报表汇总页面
    toDetail(val) {
      this.$router.push({
        path: '/management/hospitalReportDetail',
        query: {
          val: JSON.stringify(val),
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.hospital-report {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .box {
    background: #fff;
    margin: 0;
    padding: 20px;
    border-radius: 5px;
  }
  .seach-box {
    text-align: left;
    /deep/.el-form {
      .minclass {
        margin-bottom: 0;
      }
      .minclass .el-form-item__content {
        width: 240px;
        margin-right: 22px;
        .el-input {
          width: 240px;
          height: 32px;
        }
        .el-input__inner {
          height: 32px;
        }
      }

      .el-range-separator {
        line-height: 24px;
      }
      .el-form-item__label {
        line-height: 32px;
      }
    }
  }
  .data-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;
    .list-box {
      height: 660px;
      overflow: hidden;
      margin-bottom: 70px;
    }
    .list {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      max-height: 660px;
      .card-info {
        cursor: pointer;
        display: flex;
        padding: 16px;
        width: 24.43%;
        height: 116px;
        margin-right: 0.7%;
        margin-top: 16px;
        background: #ffffff;
        box-sizing: border-box;
        .card-txt {
          width: 252px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .txt-li {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            height: 20px;
            line-height: 20px;
            display: flex;
            .li-title {
              color: #666666;
            }
            .li-info {
              color: #111111;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .num {
              color: #0a73e4;
            }
          }
          .margin-12 {
            margin-top: 10px;
          }
        }
        .card-img {
          height: 100%;
          margin-left: 50px;
          display: flex;
          align-items: center;
          img {
            width: 68px;
            height: 68px;
            object-fit: cover;
          }
        }
      }
      .card-info:nth-child(4n) {
        width: 24.53%;
        margin-right: 0;
      }
      // /* 使最后一个元素的边距填满剩余空间 */
      // .card-info:last-child {
      //   margin-right: auto;
      // }
    }
    /deep/.pagination {
      position: revert;
    }
  }
}
.btn-content {
  margin-bottom: 0;
  /deep/ .el-button {
    width: 76px;
    height: 32px;
    line-height: 32px;
    padding: 0;
  }
  /deep/ .el-button--primary {
    color: #fff;
    background-color: #0a73e4;
    border-color: #0a73e4;
  }
}
</style>
